.play-sound {
    padding-top: 5px;
    padding-bottom: 5px;
}

.play-sound svg {
    margin-bottom: -3px
}

.play-sound :first-child {
    min-width: 50px;
    max-width: 180px;
    text-align: left;
    background: white;
    box-shadow: 1px 1px 1px #dddddd;
}

.play-sound i {
    box-shadow: none !important;
}

.play-sound i::before {
    transform: rotate(45deg);
    color: #808080;
}

.play-sound .playing::before {
    animation: myfirst 1s infinite ;
    -webkit-animation: myfirst 1s infinite ; /* Safari and Chrome */
}

@keyframes myfirst {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{    0% {
    opacity: 0;
}

    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.play-sound span {
    font-size: 8px;
    color: #9D9D9B;
    vertical-align: -webkit-baseline-middle;
}

.play-sound .refresh {
    padding: 3px;
    color: #d50000;
    font-size: 20px;
}

.play-sound .new {
    color: #d50000;
}

.play-sound-right {
    transform: rotate(180deg);
}

.play-sound-right :first-child {
    background-color: #9ED846 !important;
}

.play-sound-right span {
    display: inline-block;
    transform: rotate(180deg) !important;
}

.play-sound-right div i::before {
    color: #3E9101 !important;
}